﻿<div id="bookFlight">
    <h2>Book flight
    </h2>
    <div data-bind="text: departDate() + ' - ' + airline()"></div>
    <div data-bind="text: departAirport() + ' to ' + arrivalAirport()"></div>
    <div data-bind="text: 'Class: ' + seatClass()"></div>
    <div data-bind="text: 'Total price: ' + totalPrice() + '$'"></div>
    <div class="seatsCount">
        <span>Seats count:</span>
        <input data-bind="value: desiredSeatsCount" type="tel" />
    </div>
    <ul data-bind="foreach: users()">
        <li>
            <div>
                <h4 data-bind="text: 'Passenger #' + ($index() + 1) + ':'"></h4>
                <div>
                    <span>First name: </span>
                    <input data-bind="value: firstName" />
                </div>
                <div>
                    <span>Last name: </span>
                    <input data-bind="value: lastName" />
                </div>
                <div>
                    <span>Passport #: </span>
                    <input data-bind="value: passport" type="tel" />
                </div>
                <div>
                    <span>Credit Card: </span>
                    <input data-bind="value: creditCard" type="tel" />
                </div>
                <div>
                    <span>Credit Exp.: </span>
                    <input data-bind="value: creditExpiration" type="date" />
                </div>
            </div>
        </li>
    </ul>
    <div>
        <input data-bind="click: book" type="button" class="actionButton" value="Book" />
    </div>
    <div class="failureMessage" data-bind="text: failureMessage()"></div>
</div>
